import React, { memo, useEffect, useState } from 'react';
import type { FC, ReactNode } from 'react';
import { DiscoverWrapper } from './style';
import { discatList } from '@/assets/data';
import classNames from 'classnames';
import { useAppDispatch, useAppSelector } from '@/store';
import { feachCatsActon } from './store';
import { shallowEqual } from 'react-redux';
import { Outlet, useNavigate, useParams } from 'react-router-dom';

interface IProps {
  children?: ReactNode;
}

const Discover: FC<IProps> = () => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(feachCatsActon())
  }, [dispatch])

  const { hotcats, categories, sub } = useAppSelector((state) => ({
    hotcats: state.discover.hotcats,
    categories: state.discover.categories,
    sub: state.discover.sub
  }), shallowEqual)


  const [newhotcatList, setnewhotcatList] = useState([...discatList, ...hotcats])
  const [currIndex, setCurrIndex] = useState(0)

  useEffect(() => {
    if (categories) {
      setnewhotcatList([...discatList, ...hotcats])
    }
  }, [categories, discatList, hotcats])

  const [iscatTable, setIsCatTable] = useState(false)
  const navigate = useNavigate()
  const handleCatClick = (index: number) => {
    setCurrIndex(index)
    navigate(`/discover/${newhotcatList[index].name}`, {
      state: {
        index
      }
    })
    if (iscatTable) {
      setIsCatTable(false)
    }
  }

  const handleSubClick = (payload: any) => {
    const filterDate: any = newhotcatList.filter(item => item.name === payload.name)
    if (filterDate.length > 0) {
      let newCatlist = newhotcatList
      newCatlist = newCatlist.filter(item => item.name !== filterDate[0].name)
      setnewhotcatList(newCatlist)
    } else {
      setnewhotcatList([...newhotcatList, payload])
    }
  }

  const handleShowCat = () => {
    setIsCatTable(!iscatTable)
  }

  const { discText } = useParams()


  return <DiscoverWrapper>
    <div className="dis-header">发现</div>
    <div className="hotcat-list">
      {
        newhotcatList.map((item, index) => (
          <div className={classNames("hotcat-item", { active: discText === item.name ?? index === currIndex })} onClick={() => handleCatClick(index)} key={item.name}>{item.name}</div>
        ))
      }
      <div className="hotcat-item" onClick={handleShowCat}>...</div>
    </div>
    <div className="cat-table" style={{ display: iscatTable ? "block" : "none" }}>
      {categories &&
        categories?.map((item, index) => (
          <div className="big-cat" key={item}>
            <div className="big-name">{item}</div>
            <div className="cat-list">
              {sub &&
                sub?.filter(item => item.category === index).map(subItem => (
                  <div className="subCat-item" key={subItem.name} onClick={() => handleSubClick(subItem)}>
                    <span className={classNames("cat-text", { active: newhotcatList.find((hotitem: any) => hotitem.name === subItem.name) })} >{subItem.name}</span>
                  </div>
                ))
              }
            </div>
          </div>
        ))
      }
    </div>
    {/* 子路由的占位 */}
    <Outlet />
  </DiscoverWrapper>;
};

export default memo(Discover);
